<!doctype html>
<html lang="en" class="feedback">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>完成页面</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/feedback-page.css" />
		<style>
			.mui-bar{
				background-color: rgba(0,153,204,.9);
			}
			.mui-icon{
				color: #FFFFFF;
			}
			#submit{
			}
			.uploadimg{
				min-height: 60px;
				padding: 1.9%;
				padding-bottom: 0;
			}
			#head-img{
				width: 100%;
				height: 95%;
			}
			.uploadimg .image-item{
				width: 18.1%;
				height: 60px;
				padding: 10px;
			}
			.uploadimg .addImg{
				margin-right: 6px;
			}
			.image-item .image-close {
				position: absolute;
				display: inline-block;
				right: -6px;
				top: -6px;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				border-radius: 12px;
				background-color: #FF5053;
				color: #f3f3f3;
				border: solid 1px #FF5053;
				font-size: 9px;
				font-weight: 200;
				z-index: 1;
			}
			#send{
				width: 90%;
				height: 100%;
				float: left;
			}
			/*.image-item.space .image-close {
				display: none;
			}*/
			 

		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: #FFFFFF;">完成任务</h1>
		</header>
		<div class="mui-bar mui-bar-tab btn-detail"  id='btn-opears' style="background: rgba(0,0,0,0);-webkit-box-shadow:0 0 0px rgba(0,0,0,.85);">
			<button class="mui-btn mui-btn-block mui-btn-primary" id='send'>提交</button>
		</div>
		
		<div class="mui-content">
			
			<div class="row mui-input-row ui-select">
				<span class="mui-select ">
					<select style="text-align: center;text-align-last: center;"  class="refuseReson mui-h4" id="select_one" onchange="selectOption('select_one')">
						<option value="0">请选择工单类别</option>
						<option value="1">漏水工单</option>
						<option value="2">不热工单</option>
						<option value="3">换阀工单</option>
						<option value="4">开阀工单</option>
						<option value="5">其他</option>
					</select>
				</span>
			</div> 
			<div class="row mui-input-row ui-select" style="display: none;" id="select_two_div">
				<span class="mui-select ">
					<select style="text-align: center;text-align-last: center;" class="refuseReson mui-h4" id="select_two" onchange="selectOption('select_two')">
					</select>
				</span>
			</div>
			<div class="row mui-input-row ui-select" style="display: none;" id="select_three_div">
				<span class="mui-select ">
					<select style="text-align: center;text-align-last: center;"  class="refuseReson mui-h4" id="select_three">
					</select>
				</span>
			</div>
			<p class="mui-h4"  style="display: none;" id="question_p">任务描述</p>
			<div class="row mui-input-row" style="display: none;" id="question_div">
				<textarea id='question' class="mui-input-clear question" placeholder="请详细描述该任务的问题..."></textarea>
			</div>
			<p class="mui-h4 ">添加图片</p>
			
			<div class="uploadimg row" id="image-list">
				<div class="image-item addImg" style="background-image: url(images/addImg.jpg);"></div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/md5.js" ></script>
		<script type="text/javascript" src="js/uuid.js" ></script>
		<script type="text/javascript" src="js/utils.js" ></script>
	</body>
	
	<script>
		var textviews = ["1-7","2-8","3-5","4-5","5"];
		var mapOptions = {
		 "1":[
				{id:"1-1",value:"室内散热器漏水"}
				,{id:"1-2",value:"室内跑风漏水"}
				,{id:"1-3",value:"室内阀门漏水"}
				,{id:"1-4",value:"室外手动阀漏水已处理"}
				,{id:"1-5",value:"室外锁闭阀漏水已处理"}
				,{id:"1-6",value:"管道接口漏水已处理"}
				,{id:"1-7",value:"工单未完成"}
			]
		,"1-1":[{id:"1-1-1",value:"关阀自行处理"}]
		,"1-2":[{id:"1-2-1",value:"关阀自行处理"}]
		,"1-3":[{id:"1-3-1",value:"关阀自行处理"}]
		,"2":[
				{id:"2-1",value:"散热器排气已完成"}
				,{id:"2-2",value:"散热器冲洗已完成"}
				,{id:"2-3",value:"室内阀门调节已完成"}
				,{id:"2-4",value:"室外阀门问题已处理"}
				,{id:"2-5",value:"清洗过滤网已完成"}
				,{id:"2-6",value:"换热站调节"}
				,{id:"2-7",value:"用户不在家，已约定时间"}
				,{id:"2-8",value:"工单未完成"}
		]
		,"2-4":[{id:"2-4-1",value:"室外阀门调节"}]
		,"2-6":[{id:"2-6-1",value:"二次网调节已完成"}]
						
		,"3":[
				{id:"3-1",value:"更换电子锁闭阀已完成"}
				,{id:"3-2",value:"更换手动锁闭阀已完成"}
				,{id:"3-3",value:"更换供回水阀门已完成"}
				,{id:"3-4",value:"更换自动排气阀已完成"}
				,{id:"3-5",value:"工单未完成"}
			]
		,"4":[
				{id:"4-1",value:"锁闭阀门已开启"}
				,{id:"4-2",value:"供回水手动阀门已开启"}
				,{id:"4-3",value:"用户漏水已修复开启阀门"}
				,{id:"4-4",value:"开启小区单元阀"}
				,{id:"4-5",value:"工单未完成"}
			]
		};
		function isInArray(arr,value){
		    for(var i = 0; i < arr.length; i++){
		        if(value === arr[i]){
		            return true;
		        }
		    }
		    return false;
		}
		function selectOption(index){
			var selected = document.getElementById(index).value;
			console.debug(selected)
			if(selected && 5 == selected*1){
				document.getElementById("select_two_div").style.display="none";
				document.getElementById("select_two").value="0";
				document.getElementById("select_three_div").style.display="none";
				document.getElementById("select_three").value="0";
			}
			
			if(!mapOptions[selected]){
				if('select_two' == index){
					document.getElementById("select_two_div").style.display="block";
				}
				document.getElementById("select_three_div").style.display="none";
				if(isInArray(textviews,selected)){
					document.getElementById("question_p").style.display="block";
					document.getElementById("question_div").style.display="block";
				}else{
					document.getElementById("question_p").style.display="none";
					document.getElementById("question_div").style.display="none";
				}
				return ;
			}
			var options = mapOptions[selected] ;
			var doms  = "" ;
			for (var i = 0 ; i<options.length ;i++) {
				doms += '<option value="'+options[i].id+'">'+options[i].value+'</option>'
			}
			console.debug("index ==> "+index)
			if("select_one" == index){
				var op = "<option value='0'>请选择处理方式</option>" + doms ;
				document.getElementById('select_two').innerHTML = op ;
				document.getElementById("select_two_div").style.display="block";
				selectOption("select_two") ;
			}else if("select_two" == index){
				var op = "<option value='0'>请选择处理结果</option>" + doms ;
				document.getElementById('select_three').innerHTML = op ;
				document.getElementById("select_three_div").style.display="block";
			}
			if(isInArray(textviews,selected)){
				document.getElementById("question_p").style.display="block";
				document.getElementById("question_div").style.display="block";
			}else{
				document.getElementById("question_p").style.display="none";
				document.getElementById("question_div").style.display="none";
			}
		}
		
	mui.plusReady(function() {
		
		
		var imageMaxLength = 5;
		var self = plus.webview.currentWebview();
		var taskId = self.taskId ;
		var search = self.search;
		mui(".mui-content").on("tap",".addImg",function(event){
			var images = document.getElementById('image-list').querySelectorAll(".upImage");
			if(images && images.length >=imageMaxLength){
				mui.toast('图片已达上限');
				return;
			}
			var btns = [{
				title: "拍照"
			}, {
				title: "从手机相册选择"
			}];
			plus.nativeUI.actionSheet({
				cancel: "取消",
				buttons: btns
			}, function(btn) {
				switch (btn.index) {
					case 0:
						break;
					case 1:{
						getImage();
						break;
					}
					case 2:{
						galleryImg();
						break;
					}
					default:
						break
				}
			})
			
		});
		
		document.getElementById("send").addEventListener("tap",function(event){
			var images = document.getElementById('image-list').querySelectorAll(".upImage");
			
			var select1 = document.getElementById('select_one') ;
			var select2 = document.getElementById('select_two') ;
			var select3 = document.getElementById('select_three') ;
			var option1 = select1.value ||"" ;
			var option2 = select2.value ||""  ;
			var option3 = select3.value || "" ;
			
			console.debug(  option1 +"-  - " + option2 +"-  - " + option3 ) ;
			if(!option1 || 0 == option1*1){
				mui.toast("请选择工单类型") ;
				return ;				
			}
			if(mapOptions[option1] && 0 == option2*1){
				mui.toast("请选择工单处理方式") ;
				return ;				
			}
			
			if(mapOptions[option2] && 0 == option3*1){
				mui.toast("请选择工单处理结果") ;
				return ;				
			}
			var text1 = select1.options[select1.selectedIndex].text ;
			var text2 = (!select2 || !select2.options || !select2.selectedIndex || !select2.options[select2.selectedIndex]) ? "" : select2.options[select2.selectedIndex].text ;
			var text3 = (!select3 || !select3.options || !select3.selectedIndex || !select3.options[select3.selectedIndex]) ? "" : select3.options[select3.selectedIndex].text ;
			console.debug(  text1 +"======== " + text2 +"===========" + text3 ) ;
			
			var ops = [] ;
			if(text1){
				ops.push(text1) ;	
			}
			if(text2){
				ops.push(text2) ;	
			}
			if(text3){
				ops.push(text3) ;	
			}
			var description = document.getElementById("question").value ;
			var imagesFile = [] ;
			mui.each(images,function(i,img){
				var image = img.getAttribute('data-original');
				var _path = plus.io.convertLocalFileSystemURL(image) ;
				imagesFile.push(_path) ;
			});
			if(description){
				description = "|" + description ;
			}
			xhz.upload(URL_TASK_COMPLETE,{taskId:taskId, description: ops.join("|") + description,files:imagesFile},function(data){
				
				data = JSON.parse(data) ;
				if(data && data.code == 1){
					plus.nativeUI.closeWaiting();
					mui.toast("亲，您又出色的完成了一项任务") ;
					if(search){
						var searchPage = plus.webview.getWebviewById('task-search');
						mui.fire(searchPage, "taskinfo:refresh");
					}else{
						var lastPage = plus.webview.getWebviewById('subpage-home.html');
						mui.fire(lastPage, "taskinfo:remove",{id:'node_'+taskId});
					}
					var cview = plus.webview.currentWebview();
					cview.close() ;
					return ;
				}
				mui.toast(data.message) ;
			}) ;
		});
		function getImage() {//手机相机
			var c = plus.camera.getCamera();
			c.captureImage(function(e) {
				plus.io.resolveLocalFileSystemURL(e, function(entry) {
					var imgUrl = entry.toLocalURL() + "?version=" + new Date().getTime();
					pathToBase64(imgUrl);
				}, function(e) {
					console.debug("读取拍照文件错误：" + e.message);
				});
			}, function(imgUrl) {
				console.debug("error" + imgUrl);
			}, {
				filename: "_doc/head.jpg"
			})
		}

		function galleryImg() {//手机相册
			plus.gallery.pick(function(a) {
				plus.io.resolveLocalFileSystemURL(a, function(entry) {
					var imgUrl = entry.toLocalURL() + "?version=" + new Date().getTime();
					pathToBase64(imgUrl);
				}, function(e) {
					console.debug("读取拍照文件错误：" + e.message);
				});
			}, function(a) {}, {
				filter: "image"
			})
		};
		var index=1;
		function pathToBase64(path){
		 	var img = new Image();
		        img.src = path;
		        img.onload = function () {
		            var that = this;
		            //生成比例 
		            var w = that.width,
		                h = that.height;
		                scale = w / h; 
		                w = 360 || w;  //480  你想压缩到多大
		                h = w / scale;
		            //生成canvas
		            var canvas = document.createElement('canvas');
		            var ctx = canvas.getContext('2d');
		            canvas.width = w;
		            canvas.height = h;
		            ctx.drawImage(that, 0, 0, w, h);
		
		            var base64 = canvas.toDataURL('image/jpeg', 1 || 0.8 );   //1z 表示图片质量，越低越模糊。
		            var imgList = document.getElementById('image-list');
		            var imgDiv = document.createElement('div');
		            imgDiv.className = 'image-item upImage';
					imgDiv.style.backgroundImage = 'url(' + base64 + ')';
					imgDiv.setAttribute("data-original",path);
		            
					var closeButton = document.createElement('div');
					closeButton.setAttribute('class', 'image-close');
					closeButton.innerHTML = 'X';
					closeButton.addEventListener('click', function(event) {
						event.stopPropagation();
						event.cancelBubble = true;
						setTimeout(function() {
							imgList.removeChild(imgDiv);
						}, 0);
						return false;
					}, false);
					imgDiv.appendChild(closeButton);
		            imgList.appendChild(imgDiv);
				   	index++;
		    }
		}
	});
	</script>
</html>